<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery中filter方法</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css" media="screen">
    body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em '微软雅黑';
    }

    h1 {
        color: green;
    }

    .red {
        color: red;
    }

    .green {
        color: green;
    }

    </style>
    <script>
    jQuery(document).ready(function() {
        // 选择指定列
        $('td:nth-child(5n+3)')
            // 将函数作为参数传给filter方法
            .filter(function() {
                console.log($(this).text());
                if ($(this).text() > 0) {
                    return true;
                } else {
                    return false;
                }
            }).addClass('red');

   jQuery(document).ready(function() {
        // 选择指定列
        $('td:nth-child(5n+3)')
            // 将函数作为参数传给filter方法
            .filter(function() {
                console.log($(this).text());
                if ($(this).text() < 0) {
                    return true;
                } else {
                    return false;
                }
            }).addClass('green');
    });
    </script>
</head>

<body>
    <h1>jQuery中的filter方法</h1>
    <table>
        <tr>
            <th>序号</th>
            <th> 公司名称 </th>
            <th> 涨跌幅 </th>
        </tr>
        <tr>
            <td>1</td>
            <td> 苹果  </td>
            <td> -0.25%</td>
        </tr>
        <tr>
            <td>2</td>
            <td> 金山 </td>
            <td> -3.64%  </td>
        </tr>
        <tr>
            <td>3</td>
            <td> 欢聚时代  </td>
            <td> 0.24%  </td>
        </tr>
        <tr>
            <td>4</td>
            <td> 百度  </td>
            <td> -0.22%  </td>
        </tr>
       
    </table>
</body>

</html>
